<template>
	<view class="container">
		<uni-popup ref="popup" background-color="#fff" border-radius="10px 10px 0 0" @change="change">
			<view class="popup-content">
				<view class="list line">
					{{phone}}
				</view>
				<view class="list line" @click="callPhone">
					呼叫
				</view>
				<view class="list" @click="handleClick">
					取消
				</view>
				<view style="height: 121rpx;border-top: 1rpx solid #e3e4e5;" >
					
				</view>
			</view>
		</uni-popup>
	</view>
</template>
<script>
	export default {
		props:{
			phone:String
		},
		data() {
			return {


			}
		},
		mounted() {
			this.toggle()
		},
		methods: {

			toggle() {

				// open 方法传入参数 等同在 uni-popup 组件上绑定 type属性
				this.$refs.popup.open('bottom')
			},
			handleClick() {
				// this.callPhone()
				this.$refs.popup.close()
			},
			change(e){
				if(!e.show){
					this.$emit('chengeShow',false)
				}
			},
			callPhone (){
				// this.handleClick()
				uni.showModal({
				    title: '提示',
				    content: `是否拨打客服电话 ${this.phone}？`,
				    success: function(res) {
				      if (res.confirm) {
				        uni.makePhoneCall({
				          phoneNumber: this.phone
				        });
				      } else if (res.cancel) {
				        console.log('用户取消拨打电话');
				      }
				    }
				  });
			}

		}
	}
</script>
<style lang="scss">
	.popup-content {

		align-items: center;
		justify-content: center;
		padding: 15rpx 30rpx;
		// height: 50px;
		background-color: #fff;
		border-radius: 10rpx 10rpx 0 0;
	}

	.list {
		text-align: center;

		height: 100rpx;
		line-height: 100rpx;
		font-family: PingFangSC-Regular;
		font-size: 30rpx;
		color: #333333;
		text-align: center;
		font-weight: 400;
	}

	.line {
		border-bottom: 1rpx solid #EEEEEE;
	}
</style>